<!-- 在途资产 -->
<template>
  <div class="flex justify-between text-[#e54c5f]">
    <div
      class="flex items-center cursor-pointer"
      @click="$router.push('/account/assets')"
    >
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <p class="pl-5" to="">{{ $t("资产明细") }}</p>
    </div>

    <!-- <el-button
      size="large"
      type="primary"
      @click="isShowExchangeCoinDrawer = true"
    >
      {{ $t("兑换USDM") }}
    </el-button> -->
  </div>
  <el-card class="my-5">
    <span>
      <span class="px-4">{{ $t("总金额") }}:</span>
      <span class="text-xl font-extrabold">
        {{ numberToCurrencyNo(assets.balance) }} {{ assets.currency }}
      </span>
    </span>
    <span>
      <span class="px-4">{{ $t("可用金额") }}：</span>
      <span class="text-xl font-extrabold">
        {{ numberToCurrencyNo(assets.available) }} {{ assets.currency }}
      </span>
    </span>
    <span>
      <span class="px-4">{{ $t("冻结金额") }}：</span>
      <span class="text-xl font-extrabold">
        {{ numberToCurrencyNo(assets.freeze) }} {{ assets.currency }}
      </span>
    </span>
  </el-card>
  <el-card>
    <el-table :data="tableData" v-loading="loading">
      <el-table-column :label="$t('金额')" align="right">
        <template v-slot="scope">
          {{ scope.row.sg }} {{ numberToCurrencyNo(scope.row.amount) }}
        </template>
      </el-table-column>
      <el-table-column prop="currency" :label="$t('币种')" align="center" />
      <el-table-column prop="trade_type" :label="$t('类型')" align="center" />
      <el-table-column
        prop="create_time"
        :label="$t('时间')"
        align="center"
        :formatter="formatterTime"
      />
    </el-table>
    <div class="flex justify-center mt-5">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageable.total"
        :default-page-size="pageable.pageSize"
        :default-current-page="pageable.pageNum"
        :page-sizes="[10, 25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>

  <exChangeCoinDrawer
    :show="isShowExchangeCoinDrawer"
    :balance="Number(assets.available)"
    :currency="route.query.currency"
    @close="
      (val) => {
        if (val) {
          pageable.pageNum = 1;
          getTbaleData();
        }
        isShowExchangeCoinDrawer = false;
      }
    "
  />
</template>
<script setup>
import { ref, reactive } from "vue";
//import { CountTo } from "vue3-count-to";
import { useRoute } from "vue-router";
import { getAssetsRecordsApi } from "@/api/assetDetails/index";
import { formatterTime, numberToCurrencyNo } from "@/utils/utils";
import exChangeCoinDrawer from "./exChangeCoinDrawer.vue";
const loading = ref(false);
const { ...route } = useRoute();
const assets = reactive({
  asset_type: "currency",
  available: 0,
  balance: 0,
  currency: "USD",
  freeze: 0,
  usdm_price: 0,
  symbol: "$",
});
// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});
// 表格数据
const tableData = ref([]);
// 参数
const param = () => {
  return {
    page: pageable.pageNum,
    currency: route.query.currency,
    pagesize: pageable.pageSize,
  };
};

// 页码
const handleCurrentChange = (number) => {
  pageable.pageNum = number;
  getTbaleData();
};
// 条数
const handleSizeChange = (number) => {
  pageable.pageSize = number;
  getTbaleData();
};
// 获取表格数据
const getTbaleData = async () => {
  loading.value = true;

  try {
    // 获取数据
    const res = await getAssetsRecordsApi(param());
    loading.value = false;
    tableData.value = res.list;
    pageable.total = res.page.total_count;
    Object.assign(assets, res.assets);
  } catch (error) {
    loading.value = false;
  }
};

Promise.all([getTbaleData()]);

const isShowExchangeCoinDrawer = ref(false);
</script>
